<template>
    <radio-group>
        <radio class="m-cricle-check-box" checked="true" value="1" @click="change" v-if="check" />
        <radio class="m-cricle-check-box" value="0" @click="change" v-if="!check" />
    </radio-group>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
const props = defineProps({
    modelValue: Boolean
})
const check = ref(false)
const emit = defineEmits(['update:modelValue', 'change'])
function change() {
    check.value = !check.value
    emit('update:modelValue', check.value)
    emit('change', check.value)
}
watchEffect(() => {
    check.value = props.modelValue
})
</script>

<style lang="scss" scoped>
.m-cricle-check-box {
    transform: scale(0.8);
}
</style>
